<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				perspective: 500px;
			}

			section {
				position: relative;
				margin: 100px auto;
				width: 50px;
				height: 50px;
				background:url(../images/zuozhu3.jpg);
				background-size: cover;
				transform-style: preserve-3d;
				animation: rotate 12s linear infinite;
			}
			@keyframes rotate{
				from{
					transform: rotateY(0);
				}
				to{
					transform: rotateY(360deg);
				}
			}
			
			.fath .o {
				background: url(../images/zuozhu.jpg) no-repeat;
				background-size: cover;
				transform: rotateY(-180deg);
			}

			.fath div {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
			}

			.fath .a {
				background: url(../images/images/xie1.png) no-repeat;
				background-size: cover;
				transform: translateZ(150px);

			}

			.fath .b {
				background: url(../images/images/xie2.png) no-repeat;
				background-size: cover;
				transform: rotateY(60deg) translateZ(150px);
			}

			.fath .c {
				background: url(../images/images/xie3.png) no-repeat;
				background-size: cover;
				transform: rotateY(120deg) translateZ(150px);
			}

			.fath .d {
				background: url(../images/images/xie4.png) no-repeat;
				background-size: cover;
				transform: rotateY(180deg) translateZ(150px);
			}

			.fath .e {
				background: url(../images/images/xie5.png) no-repeat;
				background-size: cover;
				transform: rotateY(240deg) translateZ(150px);
				/* 这个属性切记不能分开写两行，否则会有一行失效 */
			}

			.fath .f {
				background: url(../images/images/xie6.png) no-repeat;
				background-size: cover;
				transform: rotateY(300deg) translateZ(150px);
			}
			section:hover {
				animation-play-state: paused;
			}
			/* 这个案例最主要的思路在于先把需要摆放的盒子旋转合适s角度再在Z轴正方向移动  这样就完美解决了旋转中心的问题 */
		</style>
	</head>
	<body>
		<!-- <h2>这个案例告诉我，在写图片的translateZ的时候一定不能给的太大  不然调试的时候根本看不见移动后的图片</h2> -->
		<section class="fath">
			<div class='a'></div>
			<div class='b'></div>
			<div class='c'></div>
			<div class='d'></div>
			<div class='e'></div>
			<div class='f'></div>
			<div class="o"></div>
		</section>
	</body>
</html>
